<template>
    <Dropdown
        ref="dropdown"
        @on-click="handleClick"
        :class="hideTitle ? '' : 'collased-menu-dropdown'"
        :transfer="hideTitle"
        :placement="placement"
    >
        <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}">
            <common-icon :name="showT(parentItem)" :size="rootIconSize" :color="textColor" :type="parentItem.icon" />
            <span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }} </span
            ><Icon style="float: right" v-if="!hideTitle" type="ios-arrow-forward" :size="16"
        /></a>
        <DropdownMenu ref="dropdown" slot="list">
            <div v-for="child in children" :key="`drop1-${child.name}`" style="padding: 0; margin: 0">
                <collapsed-menu
                    v-if="showChildren(child)"
                    :icon-size="iconSize"
                    :parent-item="child"
                    :key="`drop-${child.name}`"
                ></collapsed-menu>
                <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name"
                    ><common-icon :name="showName(child)" :size="iconSize" :type="child.icon" /><span class="menu-title">{{
                        showTitle(child)
                    }}</span></DropdownItem
                >
            </div>
        </DropdownMenu>
    </Dropdown>
</template>
<script>
import mixin from './mixin'
import itemMixin from './item-mixin'
import {findNodeUpperByClasses} from '@/libs/util'

export default {
    name: 'CollapsedMenu',
    mixins: [mixin, itemMixin],
    props: {
        hideTitle: {
            type: Boolean,
            default: false
        },
        rootIconSize: {
            type: Number,
            default: 16
        }
    },
    data() {
        return {
            placement: 'right-end'
        }
    },
    methods: {
        showName(item) {
            const title = item?.meta?.title
            return title
        },
        showT(item) {
            // const title = item?.children?.[0]?.meta?.title
            const title = item?.meta?.title
            return title
        },
        handleClick(name) {
            this.$emit('on-click', name)
        },
        handleMousemove(event, children) {
            console.log(children, 'children..................')
            const {pageY} = event
            const height = children.length * 38
            const isOverflow = pageY + height < window.innerHeight
            this.placement = isOverflow ? 'right-start' : 'right-end'
        }
    },
    mounted() {
        let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
        if (dropdown) dropdown.style.overflow = 'visible'
    }
}
</script>
